<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item :label="$t('language')">
        <el-select v-model="language" @change="pageGetCompanyDictionaries">
          <el-option
            v-for="item in allLanguageList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-form-item>
          <el-input v-model="value" clearable @change="pageGetCompanyDictionaries"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="pageGetCompanyDictionaries">{{
              $t('search')
            }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="showInsert"
          >{{ $t('insert') }}
          </el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
    <el-table
      :data="companyDictionariesList"
      style="width: 100%"
    >
      <el-table-column
        prop="language"
        :label="$t('language')"
      />
      <el-table-column
        prop="app"
        :label="$t('app')"
      />
      <el-table-column
        prop="keyName"
        :label="$t('keyName')"
      />
      <el-table-column
        prop="value"
        :label="$t('value')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{
              formatDate(scope.row.createdDate)
            }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="dialogCompanyDictionariesVisible"
    >
      <el-form
        label-width="20%"
        :model="companyDictionaries"
      >
        <el-form-item :label="$t('language')">
          <el-select v-model="companyDictionaries.language">
            <el-option
              v-for="item in languageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('app')">
          <el-input v-model="companyDictionaries.app"/>
        </el-form-item>
        <el-form-item :label="$t('keyName')">
          <el-input v-model="companyDictionaries.keyName"/>
        </el-form-item>
        <el-form-item :label="$t('value')">
          <el-input v-model="companyDictionaries.value"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCompanyDictionariesVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cancelNotice, formatDate, listLanguage, successNotice } from '@/util/common'
import {
  deleteCompanyDictionaries,
  insertCompanyDictionaries,
  pageGetCompanyDictionaries,
  updateCompanyDictionaries
} from '@/api/common/commonCompanyDictionariesApi'
import { getCompanyId, getPageSize } from '@/util/storage'

export default {
  name: 'CompanyDictionaries',
  data() {
    return {
      companyDictionariesList: [],
      companyDictionaries: {},
      dialogCompanyDictionariesVisible: false,
      languageList: [],
      allLanguageList: [],
      companyId: getCompanyId(),
      value: '',
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      language: null
    }
  }, created() {
    this.languageList = listLanguage(this)
    this.allLanguageList = listLanguage(this)
    this.allLanguageList.unshift({
      value: null,
      label: this.$t('all')
    })
    this.pageGetCompanyDictionaries()
  },
  methods: {
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetCompanyDictionaries()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.companyDictionaries = {
        language: 'zh',
        companyId: this.companyId
      }
      this.dialogCompanyDictionariesVisible = true
    },
    pageGetCompanyDictionaries() {
      pageGetCompanyDictionaries({
        companyId: this.companyId,
        language: this.language,
        value: this.value,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.companyDictionariesList = data.data
        } else {
          this.total = 0
          this.companyDictionariesList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.companyDictionaries
      }
      if (!json.dicId) {
        insertCompanyDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.pageGetCompanyDictionaries()
        })
      } else {
        updateCompanyDictionaries(json).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.pageGetCompanyDictionaries()
        })
      }
    },
    edit(item) {
      this.companyDictionaries = item
      this.dialogCompanyDictionariesVisible = true
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.value, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanyDictionaries({
            dicId: item.dicId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.pageGetCompanyDictionaries()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

